<template>
  <div class="container">
    <el-dialog
      :title="title"
      :visible="dialogFormVisible"
      width="28%"
      @close="close"

    >
      <el-form
        :rules="rulse"
        :model="ruleForm"
        ref="addForm"
        label-width="80px"
      >
        <el-form-item label="所属学科" prop="subjectID" v-if="!$route.query.id">
          <el-select
            v-model="ruleForm.subjectID"
            placeholder="请选择"
            label-width="100px"
            style="width: 270px"
          >
            <el-option
              v-for="item in simplealist"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="directoryName"
          label="目录名称"
          label-width="80px"
          style="width: 350px"
        >
          <el-input
            placeholder="请输入目录名称"
            v-model="ruleForm.directoryName"
          ></el-input>
        </el-form-item>

        <div style="text-align: right">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import {
  add,
  update
} from '@/api/hmmm/directorys'
export default {
  props: ['title', 'dialogFormVisible', 'ruleForm'],
  created () {
    this.simplea()
  },
  data () {
    return {
      ruleForms: {
        subjectID: '',
        directoryName: '',
        id: ''
      },
      simplealist: [],
      rulse: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ],
        subjectID: [
          { required: true, message: '请选择所属科目', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 关闭弹窗
    close () {
      this.$emit('update:dialogFormVisible', false)
      this.$refs.addForm.resetFields()
      this.$emit('update:ruleForm', { ruleForm: this.ruleForm.id = '' })
    },
    // 确认按钮
    submitForm () {
      this.$refs.addForm.validate(async (flag) => {
        if (flag) {
          if (this.$route.query.id) {
            this.ruleForm.subjectID = Number(this.$route.query.id)
          }
          if (this.ruleForm.id) {
            await update(this.ruleForm)
            this.$message.success('恭喜！修改成功')
          } else {
            await add(this.ruleForm)
            this.$message.success('恭喜！添加成功')
          }
          this.close()
          this.$parent.$parent.getDirectorylistinga()
        }
      })
    },
    async simplea () {
      const { data } = await simple()
      this.simplealist = data
    }
  }

}

</script>

<style scoped lang='less'></style>
